<template>
  <view class="buyer-page">
    <view class="buyer-search">
      <u-search placeholder="输入搜索关键字" inputAlign="center" :showAction="false" v-model="keyword"></u-search>
    </view>
    <view class="buyer-list">
      <view class="buyer-title">
        <view :class="item.value !==0 ?'title-active':'title-nav'" v-for="item,index in screenList" :key="index"
          @click="onChange(item,index)">
          <view class="title-name">{{item.name}}</view>
          <u-icon name="arrow-up-fill" color="#313131" v-if="item.value === 1"></u-icon>
          <u-icon name="arrow-down-fill" :color="item.value !==0 ?'#313131' :'#909090'" v-else></u-icon>
        </view>
      </view>
      <view class="buyer-nav">
        <view class="nav-top">
          <image src="../../../static/icon/userPage/promotion1.png" mode="" class="nav-avatar"></image>
          <view class="nav-name">羊肉啊</view>
          <image src="@/static/icon/specialcolumnPage/set.png" mode="" class="nav-set" @click="onPopupShow"></image>
        </view>
        <view class="nav-footer">
          <view>
            最后购买:2024-1-17 19:23
          </view>
          <view>
            已购<view style="color: #2F7EFC;">2</view>份 总计<view style="color: #FF5353;">222</view>金币
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="modalShow" @close="modalClose" mode="center" round="20rpx">
      <view class="modal-main">
        <view class="modal-title">确认封禁用户</view>
        <view class="modal-btn">
          <u-button text="取消" color="#C1C1C1" @click="modalClose"></u-button>
          <u-button text="确认" color="#2F7EFC" @click="modalConfirm"></u-button>

        </view>
      </view>
    </u-popup>
    <Popup :show="popupShow" :list="popupList" @popupClose="onPopupClose" @popupClick="onPopupClick"></Popup>
  </view>
</template>

<script>
  import Popup from '../components/SetPopup/Popup.vue'
  export default {
    components: {
      Popup
    },
    data() {
      return {
        keyword: '',
        screenList: [{
          name: '购买时间',
          value: 0,
          type: 1
        }, {
          name: '购买份数',
          value: 1,
          type: 2
        }, {
          name: '支付金额',
          value: 0,
          type: 3
        }],
        popupShow: false,
        popupList: [{
            title: '封禁用户',
            type: 1
          },
          {
            title: '设置折扣',
            type: 2
          },
          {
            title: '取消',
            type: 3
          }
        ],
        modalShow: false
      }
    },
    methods: {
      onPopupShow() {
        this.popupShow = true
      },
      onPopupClose(e) {
        this.popupShow = e
      },
      onPopupClick(type) {
        if (type === 2) {
          uni.navigateTo({
            url: '/pages/specialColumnPage/expertPage/expert-discount'
          })
        } else if (type === 1) {
          this.modalShow = true
        }
        this.popupShow = false
      },
      modalClose() {
        this.modalShow = false
      },
      modalConfirm() {
        console.log('确认', 11111);
        this.modalShow = false
      },
      onChange(item, index) {
        this.screenList.forEach((ele, ind) => {
          if (ind === index) {
            this.screenList[index].value = item.value === 1 ? 2 : 1
          } else {
            this.screenList[ind].value = 0
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .buyer-search {
    width: 100%;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    box-sizing: border-box;
    padding: 30rpx;
  }

  .buyer-list {
    width: 100%;
    margin-top: 20rpx;
    background: rgba(255, 255, 255);

    .buyer-title {
      height: 100rpx;
      width: 100%;
      display: flex;

      .title-active {
        width: 33.33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;
      }

      .title-nav {
        width: 33.33%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;
      }
    }


    .buyer-nav {
      width: 100%;
      height: 172rpx;
      border-top: 2rpx solid #EBEBEB;
      box-sizing: border-box;
      padding: 16rpx 30rpx;

      .nav-top {
        height: 76rpx;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #1C1C1C;

        .nav-avatar {
          height: 76rpx;
          width: 76rpx;
        }

        .nav-name {
          margin-left: 20rpx;
          flex: 1;
        }

        .nav-set {
          height: 34rpx;
          width: 72rpx;
        }
      }

      .nav-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #909090;

        :last-child {
          display: flex;
        }
      }
    }
  }

  .modal-main {
    width: 690rpx;
    height: 286rpx;
    background: rgba(255, 255, 255);
    border-radius: 20rpx;
    padding: 40rpx 60rpx;
    box-sizing: border-box;

    .modal-title {
      margin-top: 20rpx;
      font-size: 48rpx;
      font-weight: 600;
      color: #2B2B2B;
      text-align: center;
    }

    .modal-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 46rpx;

      /deep/ .u-button {
        width: 267rpx !important;
      }

      /deep/ .u-button__text {
        font-size: 32rpx !important;

      }
    }
  }
</style>